<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #big{
            width: 340px;
            height: 340px;
            margin: 200px auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #000000;
        }
        #a2{
            width: 2040px;
            height: 340px;
            top:0;
            position: absolute;
        }
        #a2 img{
            width: 340px;
            height: 340px;
        }
    </style>
    <script>
        var marquee = function () {
            var img = document.getElementById("a2");
            //把字符串转化成number
            var _left = parseInt(img.style.left);
            if (_left <= -1700){
                img.style.left = 0;
            }
            else{
                img.style.left = --_left + "px";
            }

        };
        //等页面加载完成
        window.onload = function () {
            marquee();
            var aa =  window.setInterval(marquee,10);

            //悬停停止
            document.getElementById("a2").onmouseover = function(){
                window.clearInterval(aa);
            };
            //放手继续运动
            document.getElementById("a2").onmouseout = function(){
                aa = window.setInterval(marquee,10);
            };
        };
    </script>
</head>
<body>
<div id='big'>
    <div id='a2' style='left:0;'>
        <img src="../img/ad1.JPG"><img src="../img/ad2.JPG"><img src="../img/ad3.JPG"><img src="../img/ad4.JPG"><img src="../img/ad5.JPG"><img src="../img/ad1.JPG">
    </div>
</div>

</body>
</html>